<template>
	<view>
		<cu-custom >
			<block slot="content">支付成功</block>
		</cu-custom>
		<view class="contents flex flex-direction align-center">
			<view class="flex align-center pay-success-wrap">
				<image src="/static/img/pay-success.png" class="pay-success" mode=""></image>
			</view>
			<view class="f-22 orange fontBold m-t-10">
				已支付：￥{{price}}
			</view>
		</view>
		<view class="tips f-16 fontBold orange text-center">
			已短信通知餐厅和订餐经理，祝您用餐愉快！
		</view>
		<view style="height: 130rpx;"></view>
		<view class="bottom-wrap flex justify-space-around">
			<view class="bottom-btn bottom-btn1" @click="sub(1)">
				邀请好友
			</view>
			<view class="bottom-btn bottom-btn2" @click="sub(2)">
				返回餐厅
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price:0
			}
		},
		onLoad(option) {
			if(option.price){
				this.price = option.price;
			}
		},
		methods: {
			sub(type){
				switch (type){
					case 1:
					uni.navigateTo({
						url:'/pages/operate/invite'
					})
					break;
					case 2:
					uni.switchTab({
						url:'/pages/tabbar/index'
					})
					break;
				}
			},
		}
	}
</script>

<style lang="less">
	
	.tips{
		position: fixed;
		bottom: 180rpx;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 0 30rpx;
	}
	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;
	
		.bottom-btn {
			width: 45%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}
	
	
		.bottom-btn1 {
			background: #FFCB00;
		}
	
		.bottom-btn2 {
			background: #FF5200;
		}
	}
	.pay-success-wrap{
		padding-top: 100rpx;
	}
	.pay-success{
		width: 320rpx;
		height: 320rpx;
	}
</style>
